<template>
  <Page :total="100" show-sizer show-elevator  @on-page-size-change='sizeChange'  @on-change="pageChange" />
</template>

<script>
export default {
  name: "SPage",

  data() {
    return {};
  },
  methods: {
    /**
     * @description 页数改变
     * @param
     */
    pageChange(page) {
      this.$emit("pageChagne", { type: "page", pages: page });
    },
    /**
     * @description 条数改变
     * @param
     */
    sizeChange(size) {
      this.$emit("pageChagne", { type: "size", size: size });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ivu-page-item {
  width: 27px;
  height: 27px;
  background: #f3f6fb;
  border-radius: 5px;
  border: 1px solid #f0f4fa;
  & > a {
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 28px;
    margin: 0;
  }
}
::v-deep .ivu-page-prev {
  @extend .ivu-page-item;
  .ivu-icon {
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 28px;
    margin: 0;
  }
}
::v-deep .ivu-page-next {
  @extend .ivu-page-prev;
}
::v-deep .ivu-page-item-active {
  background: #dbe2ef;
  & > a {
    color: #333;
  }
}
::v-deep .ivu-select-selection {
  height: 27px;
  border-radius: 5px;
  border: 1px solid #a1cbed;
}
::v-deep .ivu-page-options-elevator input {
  height: 27px;
  border: 1px solid #a1cbed;
  text-align: center;
}
</style>